<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .input-group {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp;箱:</labal>
            <input type="text" class="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>
<script>
    // 用户名
    // 由数字 字母 下划线 $ 组成, 6-12位,且不能以数字开头
    // (1) 一步到位
    // (2)  拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成

    // 密码：
    //  由数字 字母 下划线 $ 组成, 6-12位，密码强度

    // 手机号
    // 纯数字 11位   以1开头  第二位3-9

    // 邮箱

    // 用户名 密码 手机号 邮箱 格式全都正确 => 跳转百度


    // 2.参数解析  => 对url?之后的数据进行拆分解析  => 对象 {user:"xxx",pwd:"xxx",phone:"xxx",email:"xxx"}  => 提示 1. 多项数据之间用什么分隔?  2. 单条数据之间用什么分隔
    var url = "https://www.baidu.com/index.html?user=a123123&pwd=123123&phone=17386151421&email=123132@qq.com";




</script>

</html>